RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin / resources / views / School / StudentSegment /
Filename : index.blade.php
back
@extends('Admin.layout.main')

@section('pagestylesheet')
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/data-tables/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/data-tables/css/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/pages/data-tables.css') }}">
    <style>
        @media screen and (max-width: 600px) {
            #segmentsTable {
                font-size: 12px;
            }
            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter {
                float: none;
                text-align: center;
            }
        }

        select{
            width: 100%;
            height: 25px;
            padding: 0px 3px;
            font-size: 15px
        }
        [type='checkbox'] + span:not(.lever):before, [type='checkbox']:not(.filled-in) + span:not(.lever):after {
            width: 12px;
            height: 12px;
        }
    </style>
@stop

@section('content')
<div id="main">
    <div class="row">
        <div class="col s12">
            <div class="container">
                <div class="section section-data-tables">
                    <div class="row">
                        <div class="col s12">
                            <div class="card">
                                <div class="card-content">
                                    <div class="row">
                                        <div class="col s12 m8 l8 mt-2">
                                            <h4 class="card-title">Student Segments</h4>
                                        </div>
                                        <div class="col s12 m4 l4 mt-2 right-align">
                                            <div class="row">
                                                <div class="col s12 m12 l12">
                                                    <div class="right-align">
                                                        <a href="{{ route('student_segments.create') }}" class="btn waves-effect waves-light blue">
                                                            <i class="material-icons left">add</i> Create New Segment
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="input-field col s6 m8 l8 right-align">
                                                    <select id="bulk-action" class="browser-default">
                                                        <option value="" disabled="" selected="">Choose Action</option>
                                                        <option value="Send Mail">Send Mail to Students</option>
                                                    </select>
                                                </div>
                                                <div class="input-field col s6 m4 l4 right-align">
                                                    <button id="apply-action" class="btn waves-effect waves-light">Apply</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col s12 m6 l4">
                                            <input type="text" id="searchBox" class="form-control" placeholder="Search...">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col s12">
                                            <table id="segmentsTable" class="table table-striped responsive-table">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">
                                                            <label>
                                                            <input type="checkbox" id="select-all" class="select-all-segments">
                                                            <span></span>
                                                            </label>
                                                        </th>
                                                        <th>ID</th>
                                                        <th>Name</th>
                                                        <th>Description</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="delete-modal" class="modal">
    <div class="modal-content center-align">
        <h5>Confirm Deletion</h5>
        <p class="flow-text">Are you sure you want to delete this student segment?</p>
    </div>
    <div class="modal-footer">
        <button class="modal-close btn grey waves-effect">Cancel</button>
        <button id="confirm-delete" class="btn red waves-effect">Delete</button>
    </div>
</div>

<!-- Send Mail Modal -->
<div id="sendMailModal" class="modal">
    <div class="modal-content">
        <h5>Send mail to students of selected segments
            <a href="#!" class="modal-close waves-effect waves-red btn-flat" style="float: right;">X</a>
        </h5>
        <form id="sendMailForm">
            <div class="row">
                <div class="input-field col s12">
                    <textarea id="mailMessage" name="message" class="materialize-textarea" style="height: 150px" required></textarea>
                    <label for="mailMessage">Message</label>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <button type="submit" class="btn waves-effect waves-light">Send</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('pagescript')
<script src="{{ asset('app-assets/vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('app-assets/vendors/data-tables/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('app-assets/js/scripts/data-tables.js') }}"></script>

<script>
    let table;
    $(document).ready(function() {
        table = $('#segmentsTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: {
                url: '{{ route("student_segments.data") }}',
                data: function (d) {
                    d.search = $('#searchBox').val();
                }
            },
            columns: [
                {
                    "data": "student_segment_pk_id",
                    "orderable": false,
                    "class": "text-center",
                    "render": function(data, type, row) {
                        return '<label><input type="checkbox" class="selected-segment-ids" data-segment-id="'+data+'" value="'+data+'" ><span></span></label>';
                    }
                },
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'description', name: 'description' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false }
            ],
            drawCallback: function() {
                $('.delete-btn').off('click').on('click', function() {
                    var deleteId = $(this).data('id');
                    $('#delete-modal').modal('open');
                    $('#confirm-delete').off('click').on('click', function() {
                        $.ajax({
                            url: '{{ route("student_segments.destroy", ":id") }}'.replace(':id', deleteId),
                            type: 'POST',
                            data: {
                                _method: 'DELETE',
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                M.toast({html: 'Segment deleted successfully!', classes: 'green'});
                                $('#delete-modal').modal('close');
                                table.ajax.reload(null, false);
                            },
                            error: function() {
                                M.toast({html: 'Error deleting segment!', classes: 'red'});
                            }
                        });
                    });
                });

                // Check or uncheck all checkboxes when checked-all-tasks is clicked
                $('.select-all-segments').click(function(){
                    $('.selected-segment-ids').prop('checked', this.checked);
                });

                // Check checked-all-tasks if all checked-task-ids are checked
                $('.selected-segment-ids').click(function(){
                    if($('.selected-segment-ids:checked').length == $('.selected-segment-ids').length){
                        $('.select-all-segments').prop('checked', true);
                    }
                    else{
                        $('.select-all-segments').prop('checked', false);
                    }
                });
            }
        });

        $('#searchBox').on('keyup', function() {
            table.draw();
        });


    });
</script>

<script>
    $(document).ready(function() {

        const modals = document.querySelectorAll('.modal');
        M.Modal.init(modals);

        // Bulk action functionality
        $('#apply-action').click(function() {
            const selectedSegments = [];
            $('.selected-segment-ids:checked').each(function() {
                selectedSegments.push($(this).val());
            });

            const action = $('#bulk-action').val();

            if (!action) {
                alert('Please select an action.');
                return;
            }

            if (selectedSegments.length === 0) {
                alert('Please select at least one segment.');
                return;
            }

            if (action === 'Send Mail') {
                $('#sendMailModal').modal('open');
            }
        });
    });

    // Common function to handle bulk actions
    function handleBulkAction(formId, action, extraData = {}, successCallback = null) {
        $(formId).submit(function(event) {
            event.preventDefault();

            const selectedSegments = [];
            const selectedAllSegments = $('.select-all-segments').prop('checked');
            $('.selected-segment-ids:checked').each(function() {
                selectedSegments.push($(this).val());
            });

            // const searchText = table.search();
            const searchText = $('#searchBox').val();

            // Merge extraData with required data
            const requestData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                action: action,
                student_segment_ids: selectedSegments,
                selected_all_segments: selectedAllSegments,
                search_text: searchText,
                ...extraData
            };

            $.ajax({
                url: "{{ route('student_segments.bulk_action') }}",
                method: "POST",
                data: requestData,
                success: function(response) {
                    alert(response.message);
                    table.ajax.reload(); // Reload the DataTable
                    $('.select-all-segments').prop('checked', false);
                    $(formId).closest('.modal').modal('close'); // Close the modal

                    if (successCallback) {
                        successCallback(response);
                    }
                },
                error: function(xhr) {
                    alert('An error occurred. Please try again.');
                }
            });
        });
    }

    // Initialize bulk actions
    handleBulkAction('#sendMailForm', 'Send Mail',
        { message: () => $('#mailMessage').val() }
    );

</script>
@endsection